<template>
  <Modal :footer-hide="true" :value="showModal" :width="985" title="新增入库单" @on-cancel="closeModal">
    <Form ref="JForm" :model="formData">
      <FormItem class="custom4-class part-class" label="入库单号" prop="name">
        <div>{{ formData.toStockOrderNo }}</div>
        <!--        <Input v-model="formData.name" placeholder="请输入入库单号"></Input>-->
      </FormItem>
      <FormItem class="custom4-class part-class" label="订单总价" prop="name">
        <div>{{ (formData.amount / 100).toFixed(2) }}</div>
        <!--        <Input v-model="formData.name" placeholder="请输入订单总价"></Input>-->
      </FormItem>
      <FormItem class="custom4-class part-class" label="商品总数" prop="name">
        <div>{{ formData.countAll }}</div>
        <!--        <Input v-model="formData.name" placeholder="请输入商品总数"></Input>-->
      </FormItem>
      <FormItem class="custom4-class part-class" label="条码检索" prop="name">
        <!--        <div>{{ formData.countAll }}</div>-->
        <Input v-model="formData.barcode" placeholder="请输入商品条码" style="width: 118px;"></Input>
        <Button style="width: 52px;" type="primary" @click="getGoods">查</Button>
      </FormItem>
      <FormItem>
        <!--      <div class="m-content-table">-->
        <Table :columns="columns" :data="toStockInfoData" :height="328"></Table>
        <!--      </div>-->
      </FormItem>
      <Button style="display: block;margin:auto" type="primary" @click="add">新增</Button>
    </Form>
  </Modal>
</template>

<script>
import {mapActions} from 'vuex'
// import {addRules} from '../js/rules'
import {columns} from './js/columns'
// import BigImg from "@/views/Utils/bigImg.vue";

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      formData: {
        toStockOrderNo: '',
        amount: 0,
        countAll: 0,
        barcode: ''
      },
      toStockInfoData: [],   // 商品单位数据
      // rules: addRules(this),
      columns: columns(this),
      // file: {
      //   id: 2,
      //   name: ''
      // },  // 商品图片
      // loadingStatus: false,  // 是否在上传中
      // upfile: '选择上传商品图片',  // 上传图片按钮的text
      // unitInfo: [],   // 商品单位数据
      // typeInfo: [],   // 商品类别数据
    }
  },
  watch: {
    'toStockInfoData'(val) {
      console.log(212121)
      var amount = 0;
      var countAll = 0;
      val.forEach(v => {
        amount += v.buying * v.count
        countAll += parseInt(v.count);
      });
      this.formData.amount = amount
      this.formData.countAll = countAll
    },
  },

  mounted() {
    // this._getUnitInfo()
    // this._getTypeInfo()
    this._getOrderNo();
  },
  methods: {
    // 上传图片
    // 查找商品

    getGoods() {
      this._getGoodsDataByBarcode(this.formData.barcode)
    },
    add() {
      this._addToStock()
      this.closeModal()
      this.$emit('reloadTable')
    },
    // addGoods () {
    //   this.$refs.JForm.validate((valid) => {
    //     if (valid) {
    //       this._addGoods()
    //       this.closeModal()
    //       this.$emit('reloadTable')
    //     }
    //   })
    // },
    // 关闭页面
    closeModal() {
      this.formData = {}
      this.toStockInfoData = []
      this.$emit('closeModal')
    },
    // 添加商品接口
    // async _addGoods () {
    //   const url = '/addgoods'
    //   const res = await this.GET_DATA({
    //     dataUrl: url,
    //     picture: this.file.id,
    //     ...this.formData
    //   })
    //   if (res) {
    //     res.code === '0000' && this.$Message.success('操作成功')
    //   }
    // },
    // 获取商品单位接口
    async _getGoodsDataByBarcode(barcode) {
      const url = '/goods/findByBarcode/' + barcode
      const res = await this.GET_DATA({
        dataUrl: url,
      })
      if (res) {
        this.$nextTick(() => {
          this.toStockInfoData.push({
            barcode: res.data.goodsBarcode,
            buying: res.data.goodsBuyingPriceCommon,
            goodsImgUrls: res.data.goodsImgUrls,
            goodsName: res.data.goodsName,
            goodsKeepDay: res.data.goodsKeepDay,
            goodsMfd: '',
            goodsExp: '',
            count: 0
          })
        })
      }
    },
    _addToStock() {
      const url = '/toStock/add'
      const res = this.POST_DATA({
        dataUrl: url,
        toStockOrderNo: this.formData.toStockOrderNo,
        amount: this.formData.amount,
        countAll: this.formData.countAll,
        toStockInfoList: this.toStockInfoData
      })
      if (res) {
        // this.$nextTick(() => {
        // })
      }
    },
    async _getOrderNo() {
      const url = '/toStock/orderNo'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.formData.toStockOrderNo = res.data
        })
      }
    },
    deleteToStockInfo(index) {
      this.toStockInfoData.splice(index, 1)
    },
    ...mapActions({
      GET_DATA: '_GET_DATA',
      POST_DATA: '_POST_DATA'
    })
  }
}
</script>

<style lang="scss">
// .m-formitem {
//   width: 40%;
// }
.custom4-class {
  width: 25%;
}


.part-class {
  display: inline-block;
}
</style>